﻿export function init(container, dotNetHelper, splitterParams) {
    const panel1 = container.children[0];
    const panel2 = container.children[2];
    const splitter = container.children[1];
    const { orientation, panel1MinSize, panel2MinSize, splitterWidth } = splitterParams;
    let containerWidth = container.clientWidth - splitterWidth;
    let containerHeight = container.clientHeight - splitterWidth;
    let { panel1Size, panel2Size } = splitterParams;
    let mainPanel, mainPanelSize, mainPanelMinSize, secondPanel, secondPanelSize, secondPanelMinSize, splitSizeUnit;
    panel1Size = (!panel1Size && !panel2Size) ? "50%" : panel1Size;
    if (panel1Size) {
        mainPanel = panel1;
        mainPanelSize = panel1Size;
        mainPanelMinSize = panel1MinSize;
        secondPanel = panel2;
        secondPanelMinSize = panel2MinSize;
    } else if (panel2Size) {
        mainPanel = panel2;
        mainPanelSize = panel2Size;
        mainPanelMinSize = panel2MinSize;
        secondPanel = panel1;
        secondPanelMinSize = panel1MinSize;
    }
    const getSecondPanelSize = () => {
        if (orientation === 'h') {
            if (splitSizeUnit === 'pixel') {
                return `${containerHeight - parseFloat(mainPanelSize)}px`;
            } else if (splitSizeUnit === 'percent') {
                return `${100 - parseFloat(mainPanelSize)}%`;
            }
        } else {
            if (splitSizeUnit === 'pixel') {
                return `${containerWidth - parseFloat(mainPanelSize)}px`;
            } else if (splitSizeUnit === 'percent') {
                return `${100 - parseFloat(mainPanelSize)}%`;
            }
        }
    };
    const updatePanelSize = () => {
        if (mainPanelSize && secondPanelSize) {
            const containerSizeValue = orientation === 'h' ? containerHeight : containerWidth;
            const mainPanelMinSizeValue = getSizePixelValue(containerSizeValue, mainPanelMinSize);
            const secondPanelMinSizeValue = getSizePixelValue(containerSizeValue, secondPanelMinSize);
            const secondPanelSizeValue = getSizePixelValue(containerSizeValue, secondPanelSize);
            let mainPanelSizeValue = getSizePixelValue(containerSizeValue, mainPanelSize);
            if (mainPanelMinSizeValue && mainPanelMinSizeValue > mainPanelSizeValue) {
                mainPanelSizeValue = mainPanelMinSizeValue;
            }
            if (secondPanelMinSizeValue && secondPanelMinSizeValue > secondPanelSizeValue) {
                mainPanelSizeValue = containerSizeValue - secondPanelMinSizeValue;
            }
            if (mainPanelMinSizeValue) {
                mainPanelSizeValue = Math.max(mainPanelMinSizeValue, mainPanelSizeValue);
            }
            let actualMainPanelSize;
            if (splitSizeUnit === 'pixel') {
                mainPanelSize = `${mainPanelSizeValue}px`;
                actualMainPanelSize = mainPanelSize;
            } else if (splitSizeUnit === 'percent') {
                mainPanelSize = `${mainPanelSizeValue / containerSizeValue * 100}%`;
                actualMainPanelSize = `${mainPanelSizeValue / (containerSizeValue + splitterWidth) * 100}%`;
            }
            if (orientation === 'h') {
                mainPanel.style.height = actualMainPanelSize;
                secondPanel.style.height = `calc(100% - ${splitterWidth}px - ${actualMainPanelSize})`;
            } else {
                mainPanel.style.width = actualMainPanelSize;
                secondPanel.style.width = `calc(100% - ${splitterWidth}px - ${actualMainPanelSize})`;
            }
        }
    };
    splitSizeUnit = getSizeUnit(mainPanelSize);
    secondPanelSize = getSecondPanelSize();
    updatePanelSize();
    splitter.onpointerdown = e => {
        containerWidth = container.clientWidth - splitterWidth;
        containerHeight = container.clientHeight - splitterWidth;
        splitter.onpointermove = e => {
            if (e.buttons !== 1) {
                splitter.onpointermove = null;
                splitter.releasePointerCapture(e.pointerId);
                return;
            }
            if (splitSizeUnit === 'pixel') {
                if (orientation === 'h') {
                    const height = parseFloat(mainPanel.style.height);
                    if (mainPanel === panel1) {
                        mainPanelSize = `${height + e.movementY}px`;
                    } else {
                        mainPanelSize = `${height - e.movementY}px`;
                    }
                } else {
                    const width = parseFloat(mainPanel.style.width);
                    if (mainPanel === panel1) {
                        mainPanelSize = `${width + e.movementX}px`;
                    } else {
                        mainPanelSize = `${width - e.movementX}px`;
                    }
                }
            } else if (splitSizeUnit === 'percent') {
                if (orientation === 'h') {
                    const height = mainPanel.clientHeight;
                    if (mainPanel === panel1) {
                        mainPanelSize = `${(height + e.movementY) / containerHeight * 100}%`;
                    } else {
                        mainPanelSize = `${(height - e.movementY) / containerHeight * 100}%`;
                    }
                } else {
                    const width = mainPanel.clientWidth;
                    if (mainPanel === panel1) {
                        mainPanelSize = `${(width + e.movementX) / containerWidth * 100}%`;
                    } else {
                        mainPanelSize = `${(width - e.movementX) / containerWidth * 100}%`;
                    }
                }
            }
            secondPanelSize = getSecondPanelSize();
            updatePanelSize();
        };
        splitter.setPointerCapture(e.pointerId);
    };
    splitter.onpointerup = e => {
        splitter.onpointermove = null;
        splitter.releasePointerCapture(e.pointerId);
        if (mainPanel === panel1) {
            dotNetHelper.invokeMethodAsync('UpdatePanelSizeAsync', mainPanelSize, null);
        } else {
            dotNetHelper.invokeMethodAsync('UpdatePanelSizeAsync', null, mainPanelSize);
        }
    }
}

function getSizePixelValue(containerPixelSize, size) {
    const sizeUnit = getSizeUnit(size);
    if (sizeUnit === 'pixel') {
        return parseFloat(size);
    } else if (sizeUnit === 'percent') {
        const value = parseFloat(size);
        return value / 100 * containerPixelSize;
    }
}

function getSizeUnit(size) {
    if (size?.endsWith('%')) {
        return 'percent';
    } else if (size?.endsWith('px')) {
        return 'pixel';
    }
}

export function dispose(container) {
    const splitter = container.children[1];
    splitter.onpointerdown = null;
    splitter.onpointerup = null;
}
